<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <% 	pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
    <script src="${APP_PATH}/static/js/jquery-1.11.0.js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px;}
        #box{
            width: 400px;
            margin: 0 auto;
        }
        #top{
            background-image: url("${APP_PATH}/static/img/back.jpg");
            width: 400px;
            height: 249px;
            margin: 0 auto;
        }
        #top a{
            display: block;
            width: 70px;
            height: 20px;
            color: black;
            font-weight: bolder;
            margin: 0 auto;
            padding-top: 20px;
        }
        #top img{
            width: 80px;
            height: 80px;
            border: 2px solid #FFFFFF;
            border-radius: 40px;
            vertical-align: middle;
            margin-right: 40px;
        }
        #top>div{
            width: 300px;
            height: 60px;
            margin: 0 auto;
            margin-top: 50px;
        }
        #top span{
            font-size: 20px;
            font-weight: bolder;
            color: #FFFFFF;
            text-decoration: underline;
        }
        #middle{
            width: 400px;
            height: 40px;
            line-height: 40px;
            background: rgba(0,0,0,0.5);
            margin-top:-40px;
        }
        #middle a{
            display: inline-block;
            width: 49%;
            height: 40px;
            line-height: 40px;
            color: #FFFFFF;
            text-align: center;
            text-decoration: none;
        }
        #middle a:hover{
            background:#6495ED;
        }
        #bottom{
            background:	#F8F8F8;
        }
        .fc{
            width: 380px;
            margin: 0 auto;
            background:	#F0F0F0;
        }
        .imgAddress{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            vertical-align: middle;
            margin-top: -25px;
            margin-left: 20px;
        }
        .fc div{
            display: inline-block;
            margin-top: 15px;
            margin-left: 30px;
        }
        .back{
            width: 360px;
            height: 224px;
            margin: 0 auto;
            display: block;
        }
        .deleteMyFriend{
            float: right;
            margin-top: 10px;
            margin-right: 20px;
            display: inline-block;
            width: 25px;
            height: 25px;
            background:#6666FF;
            color: #FFFFFF;
            text-align:center;
        }
        span:hover{
            cursor:pointer;
        }
        .publish{
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: fixed;
            top: 500px;
            left: 760px;
        }
        #imgs{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            opacity: 0.8;
            position: fixed;
            top: 80%;
            left: 70%;
            display: none;
        }
        #imgs:hover{
            opacity: 1.5;
            box-shadow: 0 0 6px 8px cornflowerblue;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="top">
        <a href="login.jsp">退出登陆</a>
        <div>
            <img src="${APP_PATH}/static/img/icon.jpg" alt="">
            <span>昵称:${ sessionScope.user.name }</span>
        </div>
    </div>
    <div id="middle">
        <a href="javascript:friend()">朋友圈</a>
        <a href="javascript:myFriend()" id="a1">我的朋友圈</a>
    </div>
    <div id="bottom">

    </div>
    <img src="${APP_PATH}/static/img/publish.png" id="imgs">
</div>
<script>
    $(function(){
        friend();
    })
    //调用后台查询朋友圈信息
    function friend(){
        $("#bottom").empty();
        $.ajax({
            url:"Friend",//提交地址
            type:"post",//提交方式:get、post
            data:{},
            dataType:"json",//传输数据的数据格式:json
            success:function(result){//查询成功返回结果:result
                console.log(result);
                var html = '';
                for(var i = 0;i<result.length;i++){
                    html+='<div class="fc">';
                    html+='<img class="imgAddress" src="'+result[i].imgaddress+'" alt="">';
                    html+='<div>';
                    html+='<p style="color: blue;font-size: 20px;">"'+result[i].username+'"</p>';
                    html+='<p style="font-size: 5px;">"'+result[i].createtime+'"</p>';
                    html+='</div>';
                    html+='<hr>';
                    html+='<p style="margin: 10px;text-align: center;">"'+result[i].content+'"</p>';
                    if(result[i].fimgAddress != "" || result[i].fimgAddress != null){
                        html+='<img class="back" src="${APP_PATH}/static/'+result[i].fimgAddress+'" alt="">';
                    }
                    html+='</div>';
                }
                $("#bottom").append(html);
            }
        });
    }
    //查询个人朋友圈
    function myFriend(){
        var img=document.querySelector("#imgs")
        img.style.display="block"
        $("#bottom").empty();//刚进入页面就会查询所有朋友圈信息，要清空这些内容
        $.ajax({
            url:"MyFriend",//提交地址
            type:"post",//提交方式:get、post
            data:{"title":"1"},//数据提交到了url中，可从request域
            dataType:"json",//传输数据的数据格式:json
            success:function(result){//查询成功返回结果:result中获取值，或者通过Spring的注解@RequestParam注解
                console.log(result);
                var html = '';
                for(var i = 0;i<result.length;i++){
                    html+='<div class="fc">';
                    html+='<img class="imgAddress" src="'+result[i].imgAddress+'" alt="">';
                    html+='<div>';
                    html+='<p style="color: blue;font-size: 20px;">"'+result[i].name+'"</p>';
                    html+='<p style="font-size: 5px;">"'+result[i].createtime+'"</p>';
                    html+='</div>';
                    html+='<span class="deleteMyFriend" id="'+result[i].id+'" onclick="delFriendC(this)">X</span>';
                    html+='<hr>';
                    html+='<p style="margin: 10px;text-align: center;">"'+result[i].content+'"</p>';
                    if(result[i].fimgAddress != "" || result[i].fimgAddress != null){
                        html+='<img class="back" src="${APP_PATH}/static/'+result[i].fimgAddress+'" alt="">';
                    }
                    html+='</div>';
                }
                html+='<img class="publish" src="img/publish.png" alt="">';
                $("#bottom").append(html);
            }
        });
        $("#imgs").click(function () {
            window.location.href="publish"
        })
    }
    function delFriendC(obj){
        var flag = confirm('确定要删除吗？');
            if(flag == true){//确认删除
                var id = obj.id;
            $.ajax({
                url:"delFriendC",//提交地址
                type:"post",//提交方式:get、post
                data:{
                    id:id
                },
                dataType:"json",//传输数据的数据格式:json
                success:function(result){//result为空，不执行success方法
                    if(result == true){
                        myFriend();//重新加载个人朋友圈
                    }
                    //window.location.href = 'https://www.baidu.com/';//重新加载个人朋友圈
                }
            });
        }
    }
</script>
</body>
</html>